<template>
    <div>
        <div>
            <Form :label-width="130" inline>
                <FormItem label="字典分类">
                    <Input v-model="queryParam.description" placeholder="请输入字典分类" style="width:160px"/>
                </FormItem>
                <FormItem label="字典分类值">
                    <Input v-model="queryParam.type" placeholder="请输入字典分类值" style="width:160px"/>
                </FormItem>
                <FormItem label="是否配置金民字典">
                    <dictSelect :sel_val='queryParam.isjmtype' dictCode="yesorno" :bindData.sync="queryParam.isjmtype"
                                style="width: 160px"/>
                </FormItem>
                <FormItem label="金民字典分类">
                    <Input v-model="queryParam.jmtypename" placeholder="请输入金民字典分类" style="width:160px"/>
                </FormItem>
                <Row class="button_row">
                <span style="float: left;">
                <Button type="primary" @click="synchronous()">同步</Button>
                </span>
                    <span style="float: right;">
                      <Button type="primary" @click="searchQuery">查询</Button>
                <Button type="primary" class="button_item_left" @click="searchReset">重置</Button>
                </span>
                </Row>
            </Form>
        </div>
        <Modal v-model="visible" :title="title" width="500" style="position:relative;">
            <Form ref="formData" :model="formData" :label-width="150">
                <FormItem label="字典分类">
                    <Input v-model="formData.description" style="width: 200px" readonly/>
                </FormItem>
                <FormItem label="字典分类值">
                    <Input v-model="formData.type" style="width: 200px" readonly/>
                </FormItem>
                <FormItem label="字典名">
                    <Input v-model="formData.label" style="width: 200px" readonly/>
                </FormItem>
                <FormItem label="字典值">
                    <Input v-model="formData.value" style="width: 200px" readonly/>
                </FormItem>
                <FormItem label="金民字典分类">
                    <Input v-model="formData.jmtypename" style="width: 200px"/>
                </FormItem>
                <FormItem label="金民字典名">
                    <Input v-model="formData.jmdicname" style="width: 200px"/>
                </FormItem>
                <FormItem label="金民字典值">
                    <Input v-model="formData.jmdiccode" style="width: 200px"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="visible = false">取消</Button>
                <Button type="primary" size="large" @click="doSubmit('formData')">确定</Button>
            </div>
        </Modal>
        <div class="table_div">
            <vxe-table border
                       resizable
                       row-id="id"
                       :row-key="true"
                       show-overflow="tooltip"
                       align="center"
                       header-align="center"
                       ref="xTree"
                       :loading="Loading"
                       :radio-config="{highlight: true}"
                       :data="tableData">
                <!--                <vxe-table-column type="radio" width="60" align="center" fixed="left"/>-->
                <vxe-table-column field="description" title="字典分类" align="center" fixed="left"/>
                <vxe-table-column field="type" title="字典分类值" align="center" fixed="left"/>
                <vxe-table-column field="label" title="字典名" align="center" fixed="left"/>
                <vxe-table-column field="value" title="字典值" align="center"/>
                <vxe-table-column field="jmtypename" title="金民字典分类" align="center"/>
                <vxe-table-column field="jmdicname" title="金民字典名" align="center"/>
                <vxe-table-column field="jmdiccode" title="金民字典值" align="center"/>
                <vxe-table-column title="操作" align="center" fixed="right">
                    <template #default="{row}">
                        <Button type="default" @click="handleSubmit(row)">配置</Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                  @on-change="handleTableChange" :current="pageNo"></Page>
        </div>
    </div>
</template>

<script>
    import {postAction} from '@/api/request'
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import dictSelect from '@/components/dictSelect/dictSelect.vue'

    export default {
        mixins: [CommonMixin],
        components: {dictSelect},
        data() {
            return {
                tableData: [],
                Loading: false,
                url: {
                    list: "/api/ac/subsistence/extSysDictService/getPageList",
                    update: "/api/ac/subsistence/extSysDictService/updateData",
                    synchronous: "/api/ac/subsistence/extSysDictService/createSynchronousDict"
                },
                formData: {},
                queryParam: {},
                visible: false,
                dataCount: 0,
                pageSize: 10,
                modal: false,
                title: "",
                disableSubmit: false
            }
        },
        methods: {
            handleSubmit(row) {
                this.$refs['formData'].resetFields();
                let that = this;
                that.title = "字典配置";
                let record = row;
                if (record.id) {
                    that.visible = true
                    that.formData = Object.assign({}, record)
                } else {
                    that.visible = false
                }
            },
            synchronous() {
                let url = this.url.synchronous;
                postAction(url, "").then((res) => {
                    if (res.data.errcode === 0) {
                        this.$Message.success(res.data.data.msg);
                        this.loadData();
                    } else {
                        this.$Message.error(res.data.errmsg);
                    }
                }).finally(() => {
                });
            },
            doSubmit(name) {
                let that = this;
                let url = that.url.update;
                postAction(url, that.formData).then((res) => {
                    if (res.data.errcode === 0) {
                        this.$Message.success(res.data.data.msg);
                        this.loadData();
                        this.visible = false;
                    } else {
                        this.$Message.error(res.data.errmsg);
                    }
                }).finally(() => {

                })
            }
        },
        created() {
            this.loadData();
        },
        watch: {}
    }
</script>
<style scoped>


</style>
